<template>
  <div class="table-malfunction">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-edit-outline" type="primary" @click="handleAdd(0,'')" >
          填写事故处理单
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>

        <el-date-picker
          style="width: 250px"
          size="mini"
          align="right"
          @change="changetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="value1"
          type="datetimerange"
          :unlink-panels="true"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>

        <el-button type="primary" style="margin-left: 20px" @click="search(1,'')"  size="mini">条件查询</el-button>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-dialog
      title="填写事故处理单"
      @close='closeDialog'
      :visible.sync="dialogFormVisible"
      width="550px"
      destroy-on-close

    >

      <el-form ref="form"    :rules="rules" :model="form" >
        <el-row :gutter="40">
          <el-col :span="10">
        <el-form-item label="部门" prop="department" >
          <el-input v-model="form.department" ></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="10">
        <el-form-item label="部门负责人" prop="headOfDepartment" >
          <el-input v-model="form.headOfDepartment" ></el-input>

        </el-form-item>
          </el-col>
        </el-row>
        <el-divider>部门</el-divider>
        <el-form-item label="事故概况" prop="accidentProfile">
          <el-input v-model="form.accidentProfile" type="textarea"></el-input>

        </el-form-item>

        <el-form-item label="事故原因分析" prop="causeOfAccident">
          <el-input v-model="form.causeOfAccident" type="textarea"></el-input>

        </el-form-item>
        <el-form-item label="处理意见" prop="handlingOpinions">
          <el-input v-model="form.handlingOpinions" type="textarea"></el-input>

        </el-form-item>
        <el-form-item label="日期" prop="handleTime">

          <el-date-picker
            v-model="form.handleTime"
            type="datetime"
            style="width: 100%"

            placeholder="日期">
          </el-date-picker>

        </el-form-item>
        <el-divider>事故信息</el-divider>
        <el-row :gutter="40">
          <el-col :span="10">
        <el-form-item label="值班员签名" prop="watchmanSign">
          <el-input v-model="form.watchmanSign" style="width: 100%"></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="10">
        <el-form-item label="值班员签名日期" prop="watchmanSignTime">

          <el-date-picker
            v-model="form.watchmanSignTime"
            type="datetime"
            style="width: 100%"

            placeholder="值班员签名日期">
          </el-date-picker>

        </el-form-item>
          </el-col>
        </el-row>
        <el-divider>值班员</el-divider>
        <el-row :gutter="40">
          <el-col :span="10">
        <el-form-item label="业务部门负责人签名"prop="headOfBdSign" >
          <el-input v-model="form.headOfBdSign"></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="10">
        <el-form-item label="业务部门负责人签名日期" prop="headOfBdSignTime">

          <el-date-picker
            v-model="form.headOfBdSignTime"
            type="datetime"
            style="width: 100%"

            placeholder="业务部门负责人签名日期">
          </el-date-picker>

        </el-form-item>
          </el-col>
        </el-row>
        <el-divider>业务部门</el-divider>
        <el-row :gutter="40">
          <el-col :span="10">
        <el-form-item label="负责人签名" prop="principalSign">
          <el-input v-model="form.principalSign"></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="10">
        <el-form-item label="负责人签名日期" prop="principalSignTime">

          <el-date-picker
            v-model="form.principalSignTime"
            type="datetime"
            style="width: 100%"

            placeholder="业务部门负责人签名日期">
          </el-date-picker>

        </el-form-item>
          </el-col>
        </el-row>
        <el-divider>负责人</el-divider>
        <el-row :gutter="40">
          <el-col :span="10">
        <el-form-item label="主管领导签名" prop="supervisorSign" >
          <el-input v-model="form.supervisorSign"></el-input>

        </el-form-item>
          </el-col>
          <el-col :span="10">
        <el-form-item label="主管领导签名日期" prop="supervisorSignTime">

          <el-date-picker
            v-model="form.supervisorSignTime"
            type="datetime"
            style="width: 100%"

            placeholder="主管领导签名日期">
          </el-date-picker>

        </el-form-item>
          </el-col>
        </el-row>
        <el-divider>主管领导</el-divider>

        <el-form-item label="验证" prop="verification">
          <el-input v-model="form.verification	"></el-input>

        </el-form-item>
        <el-divider>验证</el-divider>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" >取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>

      </div>
    </el-dialog>


    <el-table
      ref="multipleTable"
      :data="tableData"
      v-loading="listLoading"

      tooltip-effect="dark"
      style="width: 100%"

    >
      <el-table-column
        prop="department"
        label="部门"
        width="150">
      </el-table-column>
      <el-table-column
        prop="headOfDepartment"
        label="部门负责人"
        width="120">
      </el-table-column>
      <el-table-column
        label="日期"
        width="180">

        <template slot-scope="scope">
          {{scope.row.handleTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column
        prop="accidentProfile"
        label="事故概况"
        width="180">
      </el-table-column>
      <el-table-column
        prop="causeOfAccident"
        label="事故原因分析"
        width="180">
      </el-table-column>

      <el-table-column
        prop="handlingOpinions"
        label="处理意见"
        width="180">
      </el-table-column>
      <el-table-column
        prop="watchmanSign"
        label="值班员签名"
        width="180">
      </el-table-column>
      <el-table-column

        label="值班员签名日期"
        width="180">
        <template slot-scope="scope">
          {{scope.row.watchmanSignTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="200px"

      >
        <template slot-scope="scope">

          <el-button type="text" @click="handleAdd(scope.row.id,scope.row)">修改 <i class="el-icon-edit"></i></el-button>
          <el-button type="text" @click="showEdit(scope.row)">详情 <i class="el-icon-document-copy"></i></el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"

      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <el-dialog
      title="事故处理单详情"
      :visible.sync="dialogFormVisibles"


    >
      <div>
        <table style="width: 100%" class="mytable">
          <tr>
            <td class="ttitle" rowspan="1">部门</td>
            <td class="ttitle">部门</td>
            <td>{{detail.department}}</td>
            <td class="ttitle">部门负责人</td>
            <td>{{detail.headOfDepartment}}</td>

          </tr>
          <tr>
            <td class="ttitle" rowspan="2">事故信息</td>
            <td class="ttitle">事故概况</td>
            <td>{{detail.accidentProfile}}</td>
            <td class="ttitle">事故原因分析</td>
            <td>{{detail.causeOfAccident}}</td>

          </tr>
          <tr>
            <td class="ttitle">日期</td>
            <td><div v-if="detail.handleTime">
              {{detail.handleTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </div></td>
            <td class="ttitle">处理意见与改进措施</td>
            <td>{{detail.handlingOpinions}}</td>
          </tr>
          <tr>
            <td class="ttitle" rowspan="1">值班</td>
            <td class="ttitle">值班员签名</td>
            <td>{{detail.watchmanSign}}</td>
            <td class="ttitle">值班日期</td>

            <td > <div v-if="detail.watchmanSignTime">{{detail.watchmanSignTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}   </div></td>

          </tr>
          <tr>
            <td class="ttitle" rowspan="1">业务部们</td>
            <td class="ttitle">业务部门负责人签名</td>
            <td>{{detail.headOfBdSign}}</td>
            <td class="ttitle">业务部门负责人签名日期</td>
            <td>
              <div v-if="detail.headOfBdSignTime">
              {{detail.headOfBdSignTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
              </div>
            </td>


          </tr>
          <tr>
            <td class="ttitle" rowspan="1">负责人</td>
            <td class="ttitle">负责人签名</td>
            <td>{{detail.principalSign}}</td>
            <td class="ttitle">负责人签名签名日期</td>
            <td >
              <div v-if="detail.principalSignTime ">
              {{detail.principalSignTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
              </div>
            </td>

          </tr>
          <tr>
            <td class="ttitle" rowspan="1">主管领导</td>
            <td class="ttitle">主管领导签名</td>
            <td>{{detail.supervisorSign}}</td>
            <td class="ttitle">主管领导签名日期</td>
            <td >
              <div v-if="detail.supervisorSignTime">
              {{detail.supervisorSignTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
              </div>
            </td>

          </tr>
          <tr>
            <td class="ttitle" rowspan="1">验证</td> <td colspan="4">{{detail.verification}}</td>



          </tr>
        </table>


      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles = false">关 闭</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
    import { parseTime} from "@/utils/index";
    import {save,search,revise,searchsheetCode} from "../../api/malfunction";
    export default {
        filters:{
            parseTime:parseTime
        },
        name: "Malfunction",
        data(){
            return{
                dialogFormVisible:false,
                dialogFormVisibles:false,
                tableData:[],
                background:true,
                listLoading:false,
                id:0,
                value1:"",
                total:0,
                detail:"",
                rules: {
                    accidentProfile: [
                        {required: true, message: '事故概况', trigger: 'blur'},

                    ],
                    department: [
                        {required: true, message: '部门', trigger: 'blur'},

                    ],
                    handleTime: [
                        {required: true, message: '日期', trigger: 'change'},

                    ],
                    watchmanSign: [
                        {required: true, message: '值班员签名', trigger: 'blur'},

                    ],
                    watchmanSignTime: [
                        {required: true, message: '值班员签名日期', trigger: 'change'},

                    ],
                    headOfDepartment: [
                        {required: true, message: '部门负责人', trigger: 'blur'},

                    ],
                    causeOfAccident: [
                        {required: true, message: '事故原因分析', trigger: 'blur'},

                    ],
                    handlingOpinions: [
                        {required: true, message: '处理意见', trigger: 'blur'},

                    ],
                    headOfBdSign: [
                        {required: true, message: '业务部门负责人签名', trigger: 'blur'},

                    ],
                    headOfBdSignTime: [
                        {required: true, message: '业务部门负责人签名日期', trigger: 'blur'},

                    ],
                    verification: [
                        {required: true, message: '验证', trigger: 'blur'},

                    ],
                    supervisorSign: [
                        {required: true, message: '主管领导签名', trigger: 'blur'},

                    ],
                    supervisorSignTime: [
                        {required: true, message: '主管领导签名日期', trigger: 'blur'},

                    ],
                    principalSign: [
                        {required: true, message: '负责人签名', trigger: 'blur'},

                    ],
                    principalSignTime: [
                        {required: true, message: '负责人签名', trigger: 'blur'},

                    ],
                },
                form:{
                    accidentProfile:"",//事故概况
                    causeOfAccident:"",//事故原因分析
                    department:"",//部门
                    handleTime:"",//日期
                    handlingOpinions:"",//处理意见
                    headOfBdSign:"",//业务部门负责人签名
                    headOfBdSignTime:"",//业务部门负责人签名日期
                    headOfDepartment:"",//部门负责人
                    institutionNumber:"",//机构编号
                    principalSign:"",//负责人签名
                    principalSignTime:"",//负责人签名日期
                    supervisorSign:"",//主管领导签名
                    supervisorSignTime:"",//主管领导签名日期
                    verification:"",//验证
                    watchmanSign:"",//值班员签名
                    watchmanSignTime:"",//值班员签名日期



                },
                queryForm:{
                    currPageNo:1,
                    limit:8,
                    institutionNumber:"",
                    handleTimeStart:"",
                    handleTimeEnd:"",
                }
            }
        },
         created(){
             this.form.institutionNumber=(localStorage.getItem("institutionNumber"))
             this.queryForm.institutionNumber=localStorage.getItem("institutionNumber")
             this.search()
         },
        methods: {
            changetime(value){
                console.log(value)
                if(this.value1){
                    this.queryForm.handleTimeStart=value[0]
                    this.queryForm.handleTimeEnd=value[1]
                }else {
                    this.queryForm.handleTimeStart=""
                    this.queryForm.handleTimeEnd=""
                }

            },
            handleAdd(id, data) {

                this.id = id
                this.dialogFormVisible = true
                if(id>0){
                   // this.form={
                   //     ...data
                   // }
                    console.log(data.sheetCode)
                    let sheetCode=data.sheetCode
                    searchsheetCode({sheetCode}).then(res =>{
                        console.log(res)
                      this.form=res.data



                    })

                }else {
                    this.form={
                        accidentProfile:"",//事故概况
                            causeOfAccident:"",//事故原因分析
                            department:"",//部门
                            handleTime:"",//日期
                            handlingOpinions:"",//处理意见
                            headOfBdSign:"",//业务部门负责人签名
                            headOfBdSignTime:"",//业务部门负责人签名日期
                            headOfDepartment:"",//部门负责人
                            institutionNumber:localStorage.getItem("institutionNumber"),//机构编号
                            principalSign:"",//负责人签名
                            principalSignTime:"",//负责人签名日期
                            supervisorSign:"",//主管领导签名
                            supervisorSignTime:"",//主管领导签名日期
                            verification:"",//验证
                            watchmanSign:"",//值班员签名
                            watchmanSignTime:"",//值班员签名日期



                    }
                }
            },
            showEdit(row) {
                console.log(row)
                this.detail = row
                this.dialogFormVisibles = true;
            },
            closeDialog() {
                this.$refs['form'].resetFields();

            },
            save() {
                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        if (this.id > 0) {

                            const {code} = await revise(this.form);
                            if (code == 200) {
                                this.$baseMessage("修改成功");
                                this.search()
                                this.dialogFormVisible = false

                            } else {
                                return false
                            }
                        } else {

                            console.log(this.form)
                            const {code} = await save(this.form);
                            if (code == 200) {
                                this.$baseMessage("添加成功");
                                this.search()
                                this.dialogFormVisible = false

                            } else {
                                return false
                            }
                        }


                    } else {
                        return false;
                    }
                });
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
            },
            handleCurrentChange(val) {
                this.queryForm.currPageNo = val;
                this.search();
            },
            search(id){
                if(id==1){
                    this.queryForm.currPageNo=1
                }
                this.listLoading=true
                search(this.queryForm).then(res =>{
                    console.log(res)
                    this.tableData=res.data.data
                    this.total=res.data.total


                })

                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            }
        }

    }
</script>

<style scoped>
.el-col-10 {
  width: 49.666667%;
}
table
{
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}
table td, table th
{
  border: 1px solid #cad9ea;
  height: 30px;
}
table .ttitle
{
  background-color: #F5FAFA;
  width: 160px;
}
table tr:nth-child(odd)
{
  background: #fff;
}
</style>
